<template>
  <div>
    <div class="comment_content">
      <h3>发表评论</h3>
      <hr>
      <textarea v-model="msg" placeholder="请输入要评论的内容(最多60个字)" maxlength="60"></textarea>

      <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

      <div class="cmt-list" v-for="(item,i) in coment" :key="item.id">
        <div class="cmt-item">
          <div class="cmt-title">第{{i+1}}楼&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}</div>
        </div>
        <div class="cmt-body">{{item.content === 'undefined' ? '此用户很懒' : item.content}}</div>
      </div>

      <mt-button type="primary" size="large" @click="getMore">获取更多</mt-button>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index:1,
      coment:[],
      msg:''
    };
  },
  created() {
    this.getComment();
  },
  methods: {
    getComment(){
      this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+ this.id + "?pageindex=" + this.index)
      .then(res=>{
        if(res.body.status == 0 ){
          // concat()方法拼接
          this.coment = this.coment.concat(res.body.message);
        }
      })
    },
    getMore(){
      this.index +=1;
      this.getComment();
    },
    postComment(){
      this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.$route.params.id,{content:this.msg})
      .then(res=>{
        // console.log(res)
        this.coment.unshift({
          add_time:new Date(),
          content:this.msg,
          user_name:'123'
        })
      })
    }

  },
  props:["id"]
}
</script>
<style lang="scss" scoped>
  .comment_content {
    h3 {
      font-size: 16px;
    }
     textarea {
    font-size: 14px;
    height: 85px;
    margin: 0;
  }

  .cmt-list {
    margin: 5px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        line-height: 30px;
        background-color: #ccc;
      }
      .cmt-body {
        line-height: 35px;
        text-indent: 2em;
      }
    }
  }
  }
</style>